Skip to content

fix(ui): Chatbot UI consistency improvements#272

Merged
rosscado merged 3 commits intomainfrom
feat/chatbot-ui-consistency
Jan 3, 2026
Merged

fix(ui): Chatbot UI consistency improvements#272
rosscado merged 3 commits intomainfrom
feat/chatbot-ui-consistency

Conversation

@rosscado
Copy link
Copy Markdown
Contributor

@rosscado rosscado commented Jan 3, 2026

Summary

UI consistency fixes for both Pi.ai and Claude.ai to ensure SayPi buttons match native host styling.

Pi.ai fixes

  • Reduce SayPi toolbar buttons from 40px to 36px to match Pi's native size-9
  • Add 8px spacing between enter and settings buttons for consistency
  • Hide settings icon outer ring for flat button appearance
  • Apply cream background (bg-cream-550) to settings button on both mobile and desktop

Claude.ai fixes

  • Fix "Voice settings" button positioning in sidebar (was at bottom, now after "Code")
  • Updated getSidebarConfig to handle Claude's new sidebar structure where "New chat" is in a separate container from "Chats, Projects, Artifacts, Code"

Both hosts

  • Changed settings button tooltip from "Settings" to "Voice settings" to differentiate from native settings buttons

Test plan

  • Pi.ai desktop: Verify buttons are 36px, consistent spacing, cream background
  • Pi.ai mobile: Verify call button is 36px, toolbar buttons have cream background
  • Claude.ai: Verify "Voice settings" appears after "Code" in sidebar
  • Hover tooltip shows "Voice settings" on both hosts

🤖 Generated with Claude Code

rosscado and others added 3 commits January 3, 2026 13:26
- Reduce SayPi toolbar buttons from 40px to 36px to match Pi's native size-9
- Add 8px spacing between enter and settings buttons for consistency
- Add outer-circle class to settings.svg for CSS targeting
- Hide settings icon ring on Pi.ai for flat button appearance
- Apply cream background to settings button on both mobile and desktop

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Claude.ai restructured their sidebar (Jan 2025):
- "New chat" is now in its own container above the scrollable area
- "Chats, Projects, Artifacts, Code" are in a separate flex column

Updated getSidebarConfig to find the menu container by looking for
recognizable navigation labels rather than starting from New chat.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Updated createMiniSettingsButton to use "voiceSettings" i18n key
instead of "extensionSettings" to differentiate from Pi.ai's native
Settings button and match Claude.ai sidebar button labeling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@rosscado rosscado merged commit 1b91c01 into main Jan 3, 2026
1 check failed
@rosscado rosscado deleted the feat/chatbot-ui-consistency branch January 3, 2026 13:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant